<script setup>
import {defineExpose, onMounted, ref} from "vue";
import BasePagination from "@/components/common/BasePagination.vue";
import service from "./service";
// 表格数据
const tableData = ref([])
// 分页数据
const pageInfo = ref({
    current: 1,
    pages: 0,
    size: 20,
    total: 0
})

const getPageData = async (page, size, queryParam) => {
    const {list, pagination} = await service.read.getPageData(page, size, queryParam)
    tableData.value = list
    pageInfo.value = {...pageInfo.value, ...pagination}
}

const handlePagesEvent = (page, size) => getPageData(page, size)

onMounted(() => getPageData(1, 20))

const columnWidth = ref({
    userNum: 85, // 用户编号
    userCode: 115, // 用户编码
    userName: 125, // 用户姓名
    sex: 55, // 性别
    email: 200, // 邮箱
    entryDate: 100, // 入职日期
    workPhone: 115, // 工作电话
    mobile: 115, // 手机号
    identityType: 85, // 证件类型
    identityNo: 170, // 证件编号
    birthday: 100, // 生日
    qq: 120, // QQ号
    weChat: 100, // 微信号
    weChatId: 110, // 微信唯一编码
    userStatus: 85, // 人员状态
    employmentType: 85, // 用工类型
    emergencyName: 125, // 紧急联系人姓名
    emergencyMobile: 125, // 紧急联系人电话
    education: 55, // 学历
    contractStartDate: 110, // 合同开始日期
    contractEndDate: 110, // 合同结束日期
    operation: 135 // 操作
})

const getPageDataByParam = (queryParam) => getPageData(1, 20, queryParam)

const emit = defineEmits(['submitEditVisible', 'submitRemoveVisible'])

const removeData = () => {
    emit('submitRemoveVisible')
}

const editData = () => {
    emit('submitEditVisible')
}

defineExpose({
    getPageDataByParam
})

</script>

<template>
    <el-table
        :data="tableData"
        :stripe="true"
        :border="true"
        style="width: auto"
    >
        <el-table-column type="selection" width="40"/>
        <el-table-column prop="userNum" label="用户编号" :width="columnWidth.userNum"/>
        <el-table-column prop="userCode" label="用户编码" :width="columnWidth.userCode"/>
        <el-table-column prop="userName" label="用户姓名" :width="columnWidth.userName"/>
        <el-table-column prop="sex" label="性别" :width="columnWidth.sex"/>
        <el-table-column prop="email" label="邮箱" :width="columnWidth.email"/>
        <el-table-column prop="entryDate" label="入职日期" :width="columnWidth.entryDate"/>
        <el-table-column prop="workPhone" label="工作电话" :width="columnWidth.workPhone"/>
        <el-table-column prop="mobile" label="手机号" :width="columnWidth.mobile"/>
        <el-table-column prop="identityType" label="证件类型" :width="columnWidth.identityType"/>
        <el-table-column prop="identityNo" label="证件编号" :width="columnWidth.identityNo"/>
        <el-table-column prop="birthday" label="生日" :width="columnWidth.birthday"/>
        <el-table-column prop="qq" label="QQ号" :width="columnWidth.qq"/>
        <el-table-column prop="weChat" label="微信号" :width="columnWidth.weChat"/>
        <el-table-column prop="weChatId" label="微信唯一编码" :width="columnWidth.weChatId"/>
        <el-table-column prop="userStatus" label="人员状态" :width="columnWidth.userStatus"/>
        <el-table-column prop="employmentType" label="用工类型" :width="columnWidth.employmentType"/>
        <el-table-column prop="emergencyName" label="紧急联系人姓名" :width="columnWidth.emergencyName"/>
        <el-table-column prop="emergencyMobile" label="紧急联系人电话" :width="columnWidth.emergencyMobile"/>
        <el-table-column prop="education" label="学历" :width="columnWidth.education"/>
        <el-table-column prop="contractStartDate" label="合同开始日期" :width="columnWidth.contractStartDate"/>
        <el-table-column prop="contractEndDate" label="合同结束日期" :width="columnWidth.contractEndDate"/>
        <el-table-column label="操作" :width="columnWidth.operation" fixed="right">
            <template #default>
                <el-button type="warning" size="small" @click="editData">修改</el-button>
                <el-button type="danger" size="small" @click="removeData">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <BasePagination :pageInfo="pageInfo" @pagesEvent="handlePagesEvent"></BasePagination>
</template>

<style scoped lang="scss">
.el-table {
    height: $table-height;
    width: 100%;
}
</style>
